<template>
  <Portlet title="提交资料">
    <el-form ref="elForm" :model="model" label-position="left" label-width="100px">
      <el-row class="row">
        <el-col :span="20">
          <el-form-item label="公司名称" prop="companyName" :rules="[
                    { required: true, message: '公司名称必填', trigger: 'blur' },
                    {validator: range, max: 20, isString: true, message: '公司名称不能超过20个字!', trigger: 'blur'}
                  ]">
            <el-input v-model.trim="model.companyName" placeholder="请填写营业执照上的公司名称" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="公司地址" prop="address" :rules="[
                    { required: true, message: '公司地址必填', trigger: 'blur' },
                    {validator: range, max: 40, isString: true, message: '公司地址不能超过40个字!请简化！', trigger: 'blur'}
                  ]">
            <el-input v-model.trim="model.address" placeholder="请填写营业执照上的注册地址" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="法人姓名：" prop="name" :rules="[
                    { required: true, message: '法人姓名必填', trigger: 'blur' },
                    {validator: range, max: 10, isString: true, message: '公司姓名不能超过10个字!', trigger: 'blur'}
                  ]">
            <el-input v-model.trim="model.name" placeholder="请填写法人姓名" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="身份证号：" prop="idNum" :rules="[
                    { required: true, message: '身份证号必须', trigger: 'blur' },
                    {validator: isId, message: '身份证号格式不正确', trigger: 'change'}
                  ]">
            <el-input v-model.trim="model.idNum" placeholder="请填写法人的身份证号" style="position:relative;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="6" style="position:relative">
          <el-form-item label="认证资料:" prop="idFrontImg"
                        :rules="{
                  required: true, message: '身份证必须', trigger: 'change', type: 'array'
                }"
          >
            <uploadImage v-model="model.idFrontImg" :formData="{group: '1'}" :max="1" :singleMaxSize="524288"></uploadImage>
            <!--<uploadImage readonly :value="stringToArr(dealDetail.dealWithImg)"  :formData="{group: '1'}"></uploadImage>-->
          </el-form-item>
          <span style="position:absolute;bottom:16px;left:40%;">身份证正面</span>
        </el-col>
        <el-col :span="6" style="position:relative">
          <el-form-item  prop="idBackImg" :rules="{
                  required: true, message: '身份证必须', trigger: 'change', type: 'array'
                }"
          >
            <uploadImage v-model="model.idBackImg"  :formData="{group: '1'}" :max="1" :singleMaxSize="524288"></uploadImage>
          </el-form-item>
          <span style="position:absolute;bottom:16px;left:40%;">身份证反面</span>
        </el-col>
        <el-col :span="6" style="position:relative">
          <el-form-item   prop="companyImg" :rules="{
                  required: true, message: '营业执照必须', trigger: 'change', type: 'array'
                }"
          >
            <!--<uploadImage v-model="model.companyImg" :formData="{group: '1'}" :max="1" :singleMaxSize="524288"></uploadImage>-->
            <UploadImage v-model="model.companyImg" :max="1" :formData="{group: businessId || 'company'}"></UploadImage>

          </el-form-item>
          <span style="position:absolute;bottom:16px;left:40%;">营业执照</span>
        </el-col>
      </el-row>
      <el-row class="row" style="margin-top: 50px;">
        <el-col :span="6" :offset="9">
          <el-button type="primary" style="width:100%" class="btn-block" @click.prevent="submit" :loading="loading">提交</el-button>
        </el-col>
        <!--<div class="col-xs-4 col-xs-offset-4">-->
          <!--<el-button type="primary" class="btn-block" @click.prevent="submit" :loading="loading">提交</el-button>-->
        <!--</div>-->
      </el-row>

    </el-form>
    <div class="clearfix"></div>
  </Portlet>
</template>
<script>
// import uploadImage from 'components/base/uploadImage'
import {isInteger, range, isFormatNumber, isId} from '@/utils/validate'
import {alert, dotData, copy} from '@/utils'
// import {stringToArr, unixTimestampFilter} from '@/filters'
// import {getComplainResult} from 'assets/scripts/business/store'
// import {httpSuccessPost} from 'assets/scripts/base/util'
import {mapActions} from 'vuex'
export default {
  name: 'companyCertificationEdit',
  components: {
    // uploadImage
  },
  filters: {
  },
  props: {
  },
  computed: {
  },
  data() {
    return {
      businessId: this.$route.params.businessId,
      examineId: this.$route.query.examineId, // 认证id
      model: {
        companyName: '',
        address: '',
        name: '',
        idNum: '',
        idFrontImg: [],
        idBackImg: [],
        companyImg: []
      },
      loading: false
    }
  },
  watch: {
    // 'examineId' (val, oldVal) {
    //   if (val === oldVal) {
    //     return
    //   }
    //   this.getBackDetail()
    // },
  },
  created() {
    // 若有认证id，则为修改页，用认证id请求该详情detail,并回填给model
    if (this.examineId) {
      this.getBackDetail()
    }
  },
  methods: {
    isInteger,
    range,
    isFormatNumber,
    isId,
    getBackDetail() {
      this.$ajax.get('/ms-fahuobao-user/OutGoodsUser/get-credential', {id: this.examineId}).then(response => {
        if (response.success) {
          this.model.companyName = dotData(response, 'data.companyName')
          console.log('aaaaaaaaaaaaaaaa', this.model.companyName)
          this.model.address = dotData(response, 'data.address')
          this.model.name = dotData(response, 'data.name')
          this.model.idNum = dotData(response, 'data.idNum')
          this.model.idFrontImg = [dotData(response, 'data.idFrontImg')]
          this.model.idBackImg = [dotData(response, 'data.idBackImg')]
          this.model.companyImg = [dotData(response, 'data.companyImg')]
        }
      })
    },
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          alert('验证未通过')
          return
        }
        let data = copy(this.model, true)
        data.idFrontImg = data.idFrontImg.join('')
        data.idBackImg = data.idBackImg.join('')
        data.companyImg = data.companyImg.join('')
        if (this.examineId) {
          data.id = this.examineId
        }
        data.businessId = this.businessId
        this.loading = true
        console.log('bbbbbbbbb', data)
        this.$ajax.post('/ms-fahuobao-user/OutGoodsUser/submit-certification', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.$confirm('提交成功', '提示', {
              type: 'success',
              center: true,
              confirmButtonText: '确定',
              showCancelButton: false,
              closeOnclickModal: false
            }).then(_ => {
              this.loading = false
              this.$router.push({path: '/ss-fhb/companyCertification/index'})
            })
          } else {
            this.loading = false
          }
        }).catch(_ => {
          this.loading = false
        })
      })
    },
    ...mapActions([
      'setRefreshRoute',
      'setCloseRoute'
    ])
  }
}
</script>
